import styled from 'styled-components';
import React from 'react';
import {useResize} from '../hooks/useResize';

const Wrapper = styled.div<{ maxHeight: number }>`
  height: ${props => props.maxHeight}px;
  display: flex;
  flex-direction: column;
`;

const HeightWrapper: React.FC = (props) => {
  const size = useResize();
  return (
    <Wrapper maxHeight={size.height}>
      {props.children}
    </Wrapper>
  );
};

export default HeightWrapper;